<template>
    <div>
        <el-menu class="el-menu-vertical-demo" background-color="#304156" text-color="#fff" active-text-color="#ffd04b"
            router unique-opened :default-active="$store.state.activePath" :collapse="$store.state.isCollapse"
            :collapse-transition="false">
            <el-menu-item :index="item.path" v-for="item in tableData" :key="item.id" @click="saveActiveState(item)">
                <template>
                    <i :class="item.icon"></i>
                    <span>{{item.name}}</span>
                </template>
            </el-menu-item>
        </el-menu>
    </div>
</template>
<script>
export default {
  data () {
    return {
      tableData: [
        {
          id: 0,
          path: '/dashboard',
          name: '首页',
          icon: 'el-icon-menu'
        },
        {
          id: 1,
          path: '/members',
          name: '成员信息',
          icon: 'el-icon-user-solid'
        },
        {
          id: 2,
          path: '/tasks',
          name: '任务信息',
          icon: 'el-icon-s-order'

        },
        {
          id: 3,
          path: '/messages',
          name: '消息详情',
          icon: 'el-icon-chat-dot-round'
        }
      ]
    }
  },
  created () {
  },
  methods: {
    /* 刷新的时候可以保留之间点击的标签页 */
    saveActiveState (item) {
      // console.log(item.name)
      /* 将点击的侧边栏活动路径存储在 会话存储中 以便保证刷新不丢失 */
      window.sessionStorage.setItem('activePath', item.path)
      window.sessionStorage.setItem('pathName', item.name)
      /* 将点击更新的路径保存在 vuex 中 便于和面包屑部分进行通信 */
      this.$store.commit('changeActivePath', item.path)
      /* 更改 面包屑显示内容 */
      /* 将准备好的数据放入vuex中 */
      this.$store.commit('changePathName', item.name)
    }
  }
}
</script>
<style lang="less" scoped>

</style>
